<template>
    <div class="bx-editor">
        <van-nav-bar title="打卡记录" left-text="返回" left-arrow border fixed @click-left="$router.go(-1)" />
        <div style="height:50px"></div>
        <van-cell-group>
            <van-field class="fieldNo" v-model="goodsName" label="产品名称" placeholder="" size="large" readonly />
            <van-field required readonly clickable label="打卡日期" :value="timeTurn(punchDate)" placeholder="--请选择--" @click="punchPop = true" right-icon="clock-o" />
            <div class="radio">
                <div><span style="color: #ee0a24">*</span>考勤状态</div>
                <van-radio-group v-model="attendance_status">
                    <van-radio name="1" checked-color="#366cb3">出勤</van-radio>
                    <van-radio name="2" checked-color="#366cb3">缺勤</van-radio>
                </van-radio-group>
            </div>
        </van-cell-group>
        <van-popup v-model="punchPop" position="bottom">
            <van-datetime-picker v-model="punchDate" type="date" :min-date="minDate" @cancel="punchPop = false" @confirm="punchPop = false" />
        </van-popup>
        <div class="foot-btn">
            <div class="blue-btn" @click="pushInfo()">保存</div>
        </div>
    </div>
</template>

<script>
export default {
    name: "eduPunch",
    data() {
        return {
            goodsName: '',
            punchDate: new Date(),
            punchPop: false,
            minDate: new Date(1970, 0, 1),
            attendance_status: '1',
        };
    },
    methods: {
        getInfo() {
            let params = {
                wx_member_id: localStorage.getItem('wx_member_id'),
                token: localStorage.getItem('token'),
                id: this.$route.query.id,
            };
            this.$post("/api/Education/detail", params)
                .then(res => {
                    if (res.code == 1) {
                        this.goodsName = res.data.basic_information.goods_name
                    } else {
                        this.$Toast(res.msg);
                    }
                })
                .catch(err => {
                });
        },
        pushInfo() {
            let params = {
                wx_member_id: localStorage.getItem('wx_member_id'),
                token: localStorage.getItem('token'),
                member_goods_id: this.$route.query.id,
                attendance_time: this.timeTurn(this.punchDate),
                attendance_status: this.attendance_status
            };
            this.$post("/api/Education/daily_attendance_save", params)
                .then(res => {
                    if (res.code == 1) {
                        setTimeout(() => {
                            this.$router.go(-1)
                        }, 1500);
                        this.$Toast(res.msg);
                    } else {
                        this.$Toast(res.msg);
                    }
                })
                .catch(err => {
                });

        },
        timeTurn(val) {
            return this.$formatDateTime(val, 'yyyy-MM-dd');
        },
    },
    created() {
        // 实例创建完成
        this.getInfo();
    },
    beforeCreate() {
        // document.querySelector("body").setAttribute("style", "background-color:#fff");
    }
}
</script>

<style lang="less">
.fieldNo {
    > div:nth-of-type(2) {
        input {
            background: #c8c8c8 !important;
        }
    }
}
</style>
<style scoped lang='less'>
.radio {
    display: flex;
    align-items: center;
    padding: 10px;

    div:nth-of-type(1) {
        width: 126px;
        font-size: 14px;
    }
}
</style>